<template name="klBox">
	<view class="modalMask" :class="[animation?'ani':'']" v-if="isShow" @tap.self="tapMask">
		<view class="modalBox" @tap.stop="jump">
			<image mode="widthFix" :src="imgSrc"></image>
			<block v-if="type!=3">
				<text class="title">{{title}}</text>
				<text class="price">{{(type==1||type==4)?'最高返：':''}}￥{{(type==1||type==4)?mFanli:price}}</text>
			</block>
			<block v-if="type==3">
				<view class="titleBox">
					<image :src="logo"></image>
					<text class="title">{{title}}</text>
				</view>
			</block>
			<button @tap.stop="jump">查看详情</button>
		</view>
		<text class="iconfont icon-guanbi2" @tap="close"></text>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		name: 'klBox', //组件名称
		// 组件参数
		data() {
			return {
				isShow: false, //是否显示
				title: '标题', //标题文字
				price: 0, //价格
				maskClose: true, //是否可以点击遮罩层关闭
				animation: false, //动画状态
				type: 0, //类型   1拼团   2课程     3店铺
				id: 0, //id
				logo:'../../static/loding.png',
				imgSrc: "../../static/loding.png",
				orderItem: {},
				mFanli: 0
			}
		},
		watch: {
			isShow(newValue) {
				if (newValue) {
					this.show()
				} else {
					this.close()
				}
			}
		},
		// 组件方法
		methods: {
			// 显示
			show() {
				this.isShow = true;
				setTimeout(() => {
					this.animation = true
				}, 30)
				uni.setClipboardData({
				    data: '',
				    success: function () {
						uni.hideToast()
				    }
				});
			},
			// 关闭
			close() {
				this.animation = false
				setTimeout(() => {
					this.isShow = false
				}, 30)

			},
			// 初始化
			init(opt) {
				Object.assign(this.$data, opt)
			},

			tapMask() {
				if (this.maskClose) {
					this.close();
				}
			},
			getData() {
				if (this.type == 1) { //拼团
					this.$store.dispatch("apiGetMyGroupDt", {
						id: this.id,
						page_no: 1,
						page_size: 10
					}).then(res => {
						this.orderItem = res.data.data;
						this.title = res.data.data.courseGroup.course.name
						this.imgSrc = res.data.data.courseGroup.course.img
						this.mtd1();
					})
				} else if (this.type == 2) { //课程
					this.$store.dispatch("apiGetGoodDetailById", {
						id: this.id,
						userId: this.isLogin ? this.userInfo.userId : 0
					}).then(res => {
						this.title = res.data.data.name
						this.imgSrc = res.data.data.img
						this.price = res.data.data.price
					})
				} else if (this.type == 3) { //店铺
					this.$store.dispatch("apiGetShopDetail", {
						id: this.id,
						userId: this.isLogin ? this.userInfo.userId : 0
					}).then(res => {
						this.title = res.data.data.name;
						this.logo=res.data.data.logo;
						let _arr=res.data.data.resList.filter(x => {
							return x.location == 4
						})
						console.log(_arr);
						this.imgSrc = _arr[0].url
					})
				} else if(this.type==4){		//拼团活动
					this.$store.dispatch("apiGetGroupDetail", {
						id: this.id,
						userId: this.isLogin ? this.userInfo.userId : 0
					}).then(res => {
						this.orderItem=res.data.data
						this.title = res.data.data.course.name;
						this.imgSrc = res.data.data.course.img;
						this.mtd2();
					})
				}else if(this.type==5){		//零元购
					this.$store.dispatch("apiGetZeroDetail", {
						id: this.id,
						userId: this.isLogin ? this.userInfo.userId : 0
					}).then(res => {
						this.title = res.data.data.course.name;
						this.imgSrc = res.data.data.course.img;
						this.price = 0

					})
				}else{
					
				}
			},
			jump() {
				this.close();
				if (this.type == 1) {
					this.toPage({
						url: 'myGroupDetail',
						id: this.id
					})
				} else if (this.type == 2) {
					this.toPage({
						url: 'goodDetail',
						id: this.id
					})
				} else if (this.type ==3) {
					this.toPage({
						url: 'shopDetail',
						id: this.id
					})
				} else if (this.type ==4) {
					this.toPage({
						url: 'groupDetail',
						id: this.id
					})
				}else if (this.type ==5) {
					this.toPage({
						url: 'zeroDetail',
						id: this.id
					})
				}else{

				}
			},
			mtd1() {
				if (this.orderItem.courseGroup.level3 && this.orderItem.courseGroup.level3 == 3) {
					this.mFanli = this.orderItem.courseGroup.amount3
				} else if (this.orderItem.courseGroup.level2 && this.orderItem.courseGroup.level2 == 2) {
					this.mFanli = this.orderItem.courseGroup.amount2
				} else {
					this.mFanli = this.orderItem.courseGroup.amount1
				}
			},
			mtd2(){
				if (this.orderItem.amount3) {
					this.mFanli = this.orderItem.amount3
				} else if (this.orderItem.amount2) {
					this.mFanli = this.orderItem.amount2
				} else {
					this.mFanli = this.orderItem.amount1
				}
			}
		},
		created() {
			setTimeout(() => {
				uni.$on("showKlBox", payload => {
					this.type = payload.type;
					this.id = payload.id;
					this.getData();
					this.show();
				})
			}, 100)

		}
	}
</script>

<style lang="less" scoped>
	.modalMask {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		top: -100%;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;

		.modalBox {
			background-color: #FFFFFF;
			width: 76%;
			border-radius: 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			padding-bottom: 40upx;
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.title {
				box-sizing: border-box;
				width: 100%;
				font-size: 32upx;
				font-weight: bold;
				padding: 20upx 30upx;
			}

			.price {
				box-sizing: border-box;
				width: 100%;
				font-size: 32upx;
				padding: 0 30upx;
				color: #ff3b2b;
			}
			.titleBox{
				display: flex;
				width: 100%;
				padding: 20upx 30upx;
				image{
					width: 120upx;
					height: 120upx;
					flex-shrink: 0;
				}
				.title{
					flex-grow: 1;
				}
			}

			button {
				width: 80%;
				font-size: 32upx;
				font-weight: bold;
				color: #FFFFFF;
				height: 80upx;
				line-height: 80upx;
				border-radius: 40upx;
				margin-top: 20upx;
				background-image: linear-gradient(-90deg, #ff4c23 0%, #ff6127 53%, #ff762b 100%);
			}
		}

		.iconfont {
			font-size: 68upx;
			color: #FFFFFF;
			margin-top: 20upx;
			font-weight: normal;
		}
	}

	.ani {
		top: 0;
	}

	.poupCntSlot {
		overflow: scroll;
	}
</style>
